<template>
  <div>
    <NavBar></NavBar>
    <div class="detail-info">
      <div class="detail-info-title">{{ infoObj.messageTitle }}</div>
      <div class="detail-info-time">{{ infoObj.sendTime }}</div>
      <div class="detail-info-text" v-html="infoObj.messageContent"></div>
    </div>
  </div>
</template>
<script>
import NavBar from '@/components/h5header'
import API from '@/services/h5/msg'
export default {
  components: { NavBar },
  data() {
    return {
      infoObj: {}
    }
  },
  created() {
    this.getData()
  },

  methods: {
    async getData() {
      let id = this.$route.query.id
      const res = await API.getMsgDetail(id)
      this.infoObj = res.data.data
      this.infoObj.sendTime =
        this.$route.query.sendData + ' ' + this.$route.query.sendTime
      this.setReadFlag()
    },
    async setReadFlag() {
      let id = this.$route.query.id
      await API.readById(id)
    }
  }
}
</script>
<style scoped lang="less">
.c-wc8ybt {
  width: 18px;
  height: 18px;
  margin-left: 5px;
}
.header-title {
  width: 232px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-info {
  position: relative;
  &-title {
    font-size: 17px;
    font-weight: bold;
    color: #333;
    padding: 0 15px;
    margin-top: 20px;
  }
  &-text {
    font-size: 17px;
    color: #333;
    padding: 0 15px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 0.5px solid #e5e5e5;
  }
  &-time {
    padding: 0 15px;
    margin-top: 10px;
    font-size: 13px;
    color: #999;
  }
  &-img {
    width: 375px;
  }
  &-footer {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 375px;
    box-shadow: rgba(0, 0, 0, 0.04) 0 -0.5px 2px 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    &-list-item {
      margin-left: 10px;
      padding: 5px 15px;
      border-radius: 16.5px;
      border: 0.5px solid #ccc;
      font-size: 11px;
      color: #999;
      img {
        width: 14px;
        height: 14px;
      }
    }
  }
}
</style>
